<template>
	<view class="main_contain">
		<view class="row_contain" v-for="(item, index) in hotelData" @click="toRoomDetail(item.id,$event)">
			<view class="left_img">
				<image :src="item.pic"></image>
			</view>
			<view class="right_content">
				<view class="cz_contain">
					<view>
						<text class="scenic_title">{{item.hotelName}}</text>
					</view>
					<view>
						<uni-rate size="18" v-model="item.hot" @change="onChange" />
					</view>
					<view class="address_contain">
						<text class="address">地址:{{item.address}}</text>
					</view>
					<view class="tag_contain">
						<uni-tag :inverted="true" text="标签" size="small" type="primary" />
						<uni-tag :inverted="true" text="标签" size="small" type="primary" />
					</view>
				</view>

			</view>
		</view>
<!-- 		<view class="flex-item uni-bg-green">B</view>
		<view class="flex-item uni-bg-blue">C</view> -->
	</view>
</template>

<script>
	import { getHotel } from "@/api/hotel/hotel.js"
	import config from '@/config'
	
	export default {
	  data() {
	    return {
		  rateValue:0,
		  hotelData:{},
		  item: {
					id: 1,
					mainImage: '/static/images/banner2.jpg',
					totalTime: '00:59:38',
					title: 'uni-applws项目！',
					nickName: 'lws',
					isFree: 0, // 是否收费0收费，1免费
					priceOriginal: 999, // 原价
					priceDiscount: 599, // 优惠价
					studyTotal: 399
		  		}
	    }
	  },
	  onLoad() {
	    this.getData()
	  },
	  methods: {
	    getData() {
			let data={pageNum:1,pageSize:10};
	      getHotel(data).then(response => {
			  this.hotelData=response.data.records;
			  // 使用for...of循环遍历对象数组
			  for (let obj of this.hotelData) {
			      obj.pic=config.minioUrl+'/'+obj.pic;
			  }
			console.log(this.hotelData);
				
	      })
	    },
		onChange(e)
		{
			console.log(e);
		},
		toRoomDetail(id,e)
		{
			this.$tab.navigateTo('/pages/room/index?'+'id='+id)
			console.log(id);
			console.log(e);
		}
	  }
	}
</script>

<style lang="scss">
	.left_img{
		width: 150rpx;
		height: 150rpx;
		float: left;
		/* border-radius: 8rpx; */
		box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.2);
		transition: 0.3s;
		border-radius: 5rpx;
		margin: 20rpx;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
	.right_content{
		float: left;
		height: 150rpx;
		
	}
	.row_contain{
		margin: 20rpx;
		background-color: rgb(247,247,247);
		box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.2);
		border-radius: 5rpx;
	}
	.row_contain::after {
		content: '';
		display: block;
		clear: both;
	}
	.cz_contain{
/* 		height: 20rpx;
		line-height: 20rpx; */
		// transform: translateY(15%);
		// line-height: 10rpx; 
		margin-top: 20rpx;
		margin-left: 25rpx;
	}
	.main_contain{
		background-color: white;
		overflow: hidden;
	}
	.scenic_title{
		font-size: 30rpx;
	}
	.address_contain{
		margin-top: 3rpx;
		.address{
			font-size: 15rpx;
			width: 100%;
		}
	}

	.tag_contain>.uni-tag:first-child{
		margin-left: 0rpx;
	}
	.tag_contain{
		margin-top: 8rpx;
		.uni-tag{
			margin-left: 10rpx;
		}
	}
</style>